<template>
  <el-dialog
    ref="dialog"
    :title="title"
    :visible.sync="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="500px"
    @close="close"
  >
    <el-form
      ref="fieldForm"
      :model="form"
      :validate-on-rule-change="false"
      label-position="top"
      class="rule-form"
    >
      <el-form-item
        v-if="!members"
        class="item-form"
        prop="usersList"
        label="选择团队成员"
        :rules="[
          { required: true, message: '请选择团队成员', trigger: 'change' },
        ]"
      >
        <el-select v-model="form.usersList" style="width: 100%">
          <el-option label="admin" value="admin" />
        </el-select>

      </el-form-item>
      <el-form-item
        v-if="isCreate"
        class="item-form"
        label="权限"
        prop="handleType"
      >
        <el-radio-group v-model="form.handleType">
          <el-radio :label="1"
            >只读
            <i class="el-icon-question title-icon"></i>
          </el-radio>
          <el-radio :label="2"
            >读写
            <i class="el-icon-question title-icon"></i>
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        class="item-form"
        :label="isCreate ? '同时添加至' : '同时移除'"
        prop="addsTypes"
      >
        <el-checkbox-group v-model="form.addsTypes">
          <el-checkbox label="1">联系人</el-checkbox>
          <el-checkbox label="2">商机</el-checkbox>
          <el-checkbox label="3">合同</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item v-if="isCreate" class="item-form" label="有效时间">
        <el-select v-model="form.validType">
          <el-option label="不限" value="" />
          <el-option label="截止到" value="end" />
        </el-select>
        <el-date-picker
          v-if="form.validType === 'end'"
          v-model="form.expiresTime"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          style="margin-left: 8px"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close" type="primary">保存</el-button>
      <el-button @click.native="close">取消</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: {
    props: Object,
    members: Array,
    isCreate: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      form: {
        usersList: [], // 变更负责人
        handleType: 1, // 操作类型
        addsTypes: [], // 添加至
        validType: "", // 有效类型
        expiresTime: "", // 有效时间
      },
      visible: false,
      title: "添加团队成员",
    };
  },
  methods: {
    show() {
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.rule-form {
  .item-form {
    // padding: 12px 12px 0;
    margin-bottom: 12px;
  }
  .title-icon {
    color: #42526e;
    cursor: pointer;
    margin-left: 4px;
    font-size: 16px;
  }
}
</style>